<template>
  <div class="padding" v-loading="loading">
    <el-card>
      <div slot="header" class="clearfix">
        <span>入库曲线图</span>
      </div>

      <el-form v-model="searchForm" size="mini" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="入库时间" prop="rangeInStockDate">
              <el-date-picker
                type="daterange"
                v-model="searchForm.rangeInStockDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="出库时间" prop="rangeOutStockDate">
              <el-date-picker
                type="daterange"
                v-model="searchForm.rangeOutStockDate"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="shippingWays">
              <div slot="label">渠道类型：</div>
              <el-select
                v-model="searchForm.shippingWays"
                multiple
                filterable
                placeholder="默认选择全部"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.channelWayMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="storageLocations">
              <div slot="label">仓库库位：</div>
              <el-select
                v-model="searchForm.storageLocations"
                multiple
                filterable
                placeholder="请选择库位"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.storageLocationMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item prop="inStockOperationIds">
              <div slot="label">入库人员：</div>
              <el-select
                v-model="searchForm.inStockOperationIds"
                multiple
                filterable
                placeholder="请选择入库人员"
              >
                <el-option
                  v-for="(item, value) in salePerformanceVo.userNameMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="inStockTotalPackages">
              <div slot="label">件数：</div>
              <el-input
                type="number"
                v-model="searchForm.inStockTotalPackages[0]"
                placeholder="请输入起始值"
              ></el-input>
              <el-input
                type="number"
                v-model="searchForm.inStockTotalPackages[1]"
                placeholder="请输入结束值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="inStockVolumeWeight">
              <div slot="label">体积重：</div>
              <el-input
                type="number"
                v-model="searchForm.inStockVolumeWeight[0]"
                placeholder="请输入起始值"
              ></el-input>
              <el-input
                type="number"
                v-model="searchForm.inStockVolumeWeight[1]"
                placeholder="请输入结束值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="inStockChargedWeight">
              <div slot="label">计费重：</div>
              <el-input
                type="number"
                v-model="searchForm.inStockChargedWeight[0]"
                placeholder="请输入起始值"
              ></el-input>
              <el-input
                type="number"
                v-model="searchForm.inStockChargedWeight[1]"
                placeholder="请输入结束值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="inStockVolume">
              <div slot="label">方数：</div>
              <el-input
                type="number"
                v-model="searchForm.inStockVolume[0]"
                placeholder="请输入起始值"
              ></el-input>
              <el-input
                type="number"
                v-model="searchForm.inStockVolume[1]"
                placeholder="请输入结束值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="inStockActualWeight">
              <div slot="label">实重：</div>
              <el-input
                type="number"
                v-model="searchForm.inStockActualWeight[0]"
                placeholder="请输入起始值"
              ></el-input>
              <el-input
                type="number"
                v-model="searchForm.inStockActualWeight[1]"
                placeholder="请输入结束值"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-button size="mini" type="primary" @click="statistics"
              >统计</el-button
            >
          </el-col>
        </el-row>
      </el-form>

      <line-chart
        v-if="chartData.xTitle"
        :chart-data="chartData"
        :titleInfo="titleInfo"
        :chartList="chartList"
      />
    </el-card>
  </div>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import LineChart from "./components/LineChart";
import { getPickerQuickOptions } from "@/utils/date-picker.js";
export default {
  props: ["data"],
  components: {
    LineChart
  },
  data() {
    return {
      loading: false,
      salePerformanceVo: {
        channelWayMap: null,
        userNameMap: null,
        storageLocationMap: null
      },
      searchForm: {
        inStockTotalPackages: [],
        inStockActualWeight: [],
        inStockVolumeWeight: [],
        inStockChargedWeight: [],
        inStockVolume: []
      },
      pickerOptions: getPickerQuickOptions(),
      titleInfo: {
        text: "入库曲线图",
        subtext: ``,
        legend: ["入仓货量", "出仓货量", "方数", "实重", "计费重"]
      },
      chartList: [
        { prop: "inStockTotalPackagesList", label: "入仓货量" },
        { prop: "serviceTotalPackagesList", label: "出仓货量" },
        { prop: "instockVolumesList", label: "方数" },
        { prop: "inStockActualWeightsList", label: "实重" },
        { prop: "inStockChargedWeightsList", label: "计费重" }
      ],
      chartData: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const data = await ajax("initQueryInstockOfDayChartQuery", {});
      if (data.code == 200) {
        this.salePerformanceVo.channelWayMap = data.data.channelWayMap;
        this.salePerformanceVo.userNameMap = data.data.userNameMap;
        this.salePerformanceVo.storageLocationMap =
          data.data.storageLocationMap;
      }
    },
    statistics() {
      this.countSaleProfitChart();
    },
    async countSaleProfitChart() {
      this.loading = true;
      const data = await ajax("queryInstockOfDayChart", this.searchForm);
      if (data.code == 200) {
        this.chartData = data.data;
      } else {
        this.$message.error(data.message);
      }
      this.loading = false;
    }
  }
};
</script>
<style scoped>
/deep/ .el-select {
  width: 100%;
}
</style>
